/* eslint-disable no-unused-vars */
import React, { Component } from 'react'
import { Grid, CssBaseline, Box } from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'
import { MenuLeft, MainTap } from '@/components'
import UserManagement from './pages/UserManagement'

const styles = {
  container: {
    width: '100%',
    height: '100vh',
    overflow: 'hidden',
    minWidth: '1200px',
    minHeight: '700px',
    display: 'flex',
    // backgroundColor: '#f3f3f4',
  },
  menu: {
    maxWidth: '200px',
    height: '100%',
    background: '#001529',
  },
  main: {
    flex: '1',
    height: '100%',
  },
}

@withStyles(styles)
class NewHome extends Component {
  state = {
    collapsed: false,
  }
  render() {
    const { collapsed } = this.state
    return (
      <React.Fragment>
        <CssBaseline />
        <Grid
          className={this.props.classes.container}
          container
          direction='row'
          justifyContent='center'
          alignItems='center'
        >
          <Box className={this.props.classes.menu}>
            <MenuLeft collapsed={collapsed} />
          </Box>
          <Box className={this.props.classes.main}>
            <MainTap collapsed={collapsed} onMenuLeftShow={() => this.setState({ collapsed: !collapsed })} />
            <UserManagement />
          </Box>
        </Grid>
      </React.Fragment>
    )
  }
}

export default NewHome
